<template>
  <div class="release-post">
    <div class="post-content">
      <form :model="FormItem" class="post-form">
        <div class="title">
          <div class="title-text">
            <span>标题：</span>
          </div>
          <div class="input-title">
            <el-input v-model="FormItem.title" placeholder="请输入标题"></el-input>
          </div>
        </div>

        <!-- 编辑器内容 -->
        <div class="content">
          <div class="editor-container">
            <Editor v-model="content"/>
          </div>
        </div>
      </form>
      <div class="post-sector">
        <div class="sector-title">发布板块：</div>
        <div class="sector-item" v-for="(item, index) in sectorItems" :key="index" @click="selectSector(item)"
          :class="{ 'active': selectedSector === item }">
          {{ item }}
        </div>
      </div>
    </div>

  </div>
  <div class="footer">
    <div class="footer-centent">
      <div class="footer-text">
        <el-button>回到顶部</el-button>
      </div>
      <div class="btn">
        <el-button type="primary" @click="createPost">发布</el-button>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted} from 'vue'
import service from '@/utils/request'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import Editor from '@/components/Editor.vue'

// 添加这行初始化router
const router = useRouter()
const sectorItems = ref(['同人', '原创', '转载', '其他'])


const userInfo = ref({
  id: ''
})

const fileInput = ref(null)
const imgItems = ref([]) // 修改为空的数组

// 表单数据
const FormItem = ref({
  title: '',
  content: '',
  authorId: '' // 先初始化为空字符串
})

// 修改为使用不同的变量名，或者直接使用form.content
const content = ref('')

onMounted(() => {
  const storedUser = JSON.parse(localStorage.getItem('userInfo')) || {}
  userInfo.value = {
    id: storedUser.id
  }
  // 手动更新FormItem中的authorId
  FormItem.value.authorId = userInfo.value.id
})
const handleFileClick = () => {
  fileInput.value.click()
}

const createPost = async () => {
  try {
    if (FormItem.value.title === '' || content.value === '') {
      ElMessage.error('标题和内容不能为空')
      return
    }
    const postData = {
      ...FormItem.value,
      sector: selectedSector.value,
      content: content.value
      // imageUrls: imgItems.value.map(item => item.imageUrls).filter(url => url)
    }

    const response = await service.post('/posts/createPost', postData)
    if (response.code !== 200) {
      ElMessage.error(response.message)
      console.log(response)
      return
    } else {
      ElMessage.success('发布成功！')
      FormItem.value.title = ''
      // 确保使用router进行跳转
      router.push('/')
    }
  } catch (error) {
    ElMessage.error('发布失败，请重试')
  }
}
// 在script setup部分添加
const selectedSector = ref(null)
const selectSector = (sector) => {
  selectedSector.value = sector
}
</script>

<style lang="scss" scoped>
.release-post {
  margin-top: 60px;
  padding-top: 60px;
  width: 100%;
  min-height: calc(100vh - 60px);
  background: #f5f7fa;

  .post-content {
    margin: 0 auto;
    width: 680px; // 稍微增加宽度
    padding: 32px; // 增加内边距
    background: #fff;
    border-radius: 12px; // 增大圆角
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); // 增强阴影

    .title,
    .content {
      margin-bottom: 28px; // 增加间距

      &-text {
        font-size: 17px; // 增大字体
        margin-bottom: 12px;
      }
    }

    .title,
    .content {
      margin-bottom: 24px;

      &-text {
        font-size: 16px;
        font-weight: 500;
        color: #303133;
        margin-bottom: 8px;
      }
    }
  }

  .post-sector {
    margin: 24px auto 0;
    width: 680px;
    display: flex;
    gap: 12px;
    background: #fff;

    .sector-title {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 15px;
      color: #606266;
      padding-left: 4px;
    }

    .sector-item {
      flex: 1;
      padding: 10px 16px;
      border-radius: 6px;
      text-align: center;
      font-size: 14px;
      cursor: pointer;
      background: #f3f6f8;
      transition: all 0.3s ease;

      &:hover {
        color: #409eff;
      }

      &.active {
        background: #00d2d6;
        border-color: #00d2d6;
        color: #fff;
        font-weight: 500;
      }
    }
  }
}


.footer {
  margin-top: 24px; // 增加底部间距
  bottom: 0;
  width: 100%;
  padding: 16px 0; // 增加上下内边距
  background: #fff;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  z-index: 999; // 确保在最上层

  .footer-centent {
    margin: 0 auto;
    width: 650px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px; // 增加按钮间距

    .el-button {
      padding: 14px 32px; // 进一步增大按钮
      font-size: 16px;
      font-weight: 500;
      border-radius: 6px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      &--primary {
        background-color: #409eff;
        border-color: #409eff;
        font-weight: 500;
        padding: 12px 36px; // 增大主按钮内边距

        &:hover {
          background-color: #66b1ff;
          border-color: #66b1ff;
        }
      }
    }
  }
}
</style>